<template>
  <div class="comment">
    <div class="title">
      <div class="top">
        <SvgIcon name="comment" class="svg" />
        <h3>最近评论</h3>
      </div>
      <div class="line"></div>
    </div>
    <div class="comment-item">
      <div
        v-for="(item, index) in data.commentList"
        :key="index"
        class="user-comment"
      >
        <div class="user-comment-logo">
          <img :src="item.senderAvatar" alt="" />
        </div>
        <div class="user-comment-item">
          <span class="comment-name">
            {{ item.senderName }}
          </span>
          <span class="comment-time">
            {{ item.gmtCreate }}
          </span>
          <span class="comment-content">
            {{ item.content }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { _commentList } from '@/pages/index/index.service.ts';
import { CommentList } from '@/pages/talk/talk.types.ts';

const data = reactive({
  commentList: [] as CommentList[]
});

onMounted(() => {
  getCommentList();
});

function getCommentList() {
  _commentList().then((res) => {
    data.commentList = res.data;
  });
}
</script>

<style scoped lang="less">
.comment {
  width: 100%;
  height: 560px;

  box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
    var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);

  border-radius: 20px;

  position: relative;
  background-color: var(--background-secondary);
  margin-top: 20px;

  display: flex;
  flex-direction: column;

  .comment-item {
    height: 500px;
    padding: 15px 20px;

    .user-comment {
      height: 80px;
      border-radius: 10px;
      background-color: var(--background-primary);
      box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
        var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);
      display: flex;
      margin-bottom: 10px;

      .user-comment-logo {
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: flex-start;

        img {
          width: 40px;
          height: 40px;
          border-radius: 40px;
          margin-top: 10px;
          margin-left: 5px;
        }
      }

      .user-comment-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        margin-top: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        .comment-name {
          color: var(--text-accent);
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .comment-time {
          color: #9c98a2;
          font-size: 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .comment-content {
          color: var(--font-color);
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .title {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;

    .top {
      display: flex;
      align-items: center;

      .svg {
        width: 20px;
        height: 20px;
      }

      h3 {
        margin-left: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
      }
    }

    .line {
      background: linear-gradient(
        130deg,
        rgb(36, 198, 220),
        rgb(84, 51, 255) 41.07%,
        rgb(255, 0, 153) 76.05%
      );
      width: 60px;
      height: 4px;
      border-radius: 100000px;
    }
  }
}
</style>
